<template>
  <div class="layout_billdetail">
    <!-- 新增提示 -->
    <div class="subWall" v-if="subMsg">{{ subMsgContent }}</div>
    <!--  -->
    <!-- <div v-if="msg.order.type>3" class="allBox">
            <div class="aicon" v-if="msg.order.type<6">秒杀</div>
            <div class="aicon" v-else>全款</div>
         
            <img src="@/assets/images/billEnd.png" class="billendImg" alt />
            <div class="row">
                <label>项 目 名 称：</label>
                <span>{{msg.order.project_name}}</span>
            </div>

            <div class="row">
                <label>项 目 金 额：</label>
                <span>{{msg.order.project_price | moneyFormat}}</span> 
            </div>

            <div class="jiange"></div>
    </div>-->
    <!-- 在此添加订单戳 跟流水单号
    -->
    <ul class="list" id="billdetail">
      <li class="orderClass">
        流 水 单 号：{{msg.order_sn}}
        <div v-if="msg.level == 1" class="subSqurt all">全额</div>
        <div v-if="msg.level == 2" class="subSqurt first">首单</div>
        <div v-if="msg.level == 3" class="subSqurt second">二单</div>
        <div v-if="msg.level == 4" class="subSqurt three">三单</div>
        <div v-if="msg.level == 5" class="subSqurt">积分</div>
      </li>
      <li>医&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;院：{{msg.hospital_name}}</li>
      <li class="line">
        客 户 姓 名：{{msg.user_name}}
        <div class="member" v-if="msg.is_from_member">
          <span>369会员</span>
        </div>
      </li>
      <li>
        客 户 手 机：
        <a :href="'tel:'+msg.user_phone">{{msg.user_phone}}</a>
      </li>
      <li>
        身 份 证 号：
        <span v-if="msg.user_identify">{{msg.user_identify}}</span>
        <span v-else>未认证</span>
        <div v-if="!msg.user_identify" class="my-button" @click="cardFn()">
          <span>实名认证</span>
        </div>
      </li>
      <!-- <li>付 款 方 式：{{msg.payment}}</li> -->
      <!-- 此处支付时间是 线下支付时间 -->
      <li>报 单 类 型：{{msg.form_type | formTypeFn}}</li>
      <!-- <li v-if="msg.payment_id != 3">支 付 时 间：{{msg.order_time}}</li>
      <li>客 户 类 型：{{msg.source==1?'渠道':'直客'}}</li>-->
      <li class="row">
        <!-- <label>活 动 名 称：{{msg.sales_type==2020?'2020定金全额补':'未参加'}}</label> -->

        <label>活 动 名 称：{{msg.sales_type | sales_typeFn}}</label>
      </li>
      <li>
        消费总金额：{{msg.total_price | moneyFormat}}
        <div class="my-button" @click="to_up()" v-if="msg.is_up != 2">
          <span>升单</span>
        </div>
      </li>
      <!-- <li v-if="msg.form_type==0">扣除杂费金额：{{msg.pay_money | moneyFormat}}</li> -->

      <!-- <li>预计现金补贴：{{msg.cash_allowance | moneyFormat}}</li>
      <li>预计积分补贴：{{msg.integral_allowance | moneyFormat}}</li>-->

      <!-- V1.8.7 -->
      <li>
        <p>付 款 方 式</p>
        <div class="fw-b">
          <div class="divs-b" v-if="msg.online_money>0">
            <p>&emsp;线上收款：{{msg.online_money}}</p>
            <div class="my-button" style="float:left!important" @click="show_pay()">
              &emsp;
              <span>线上支付详情</span>
            </div>
          </div>
          <div class="divs-b" v-if="msg.online_money>0">
            <p>&emsp;已支付：{{msg.pay_price | moneyFormat}}</p>
            <div
              v-if="msg.pay_status != 3&&(this.msg.online_money!=this.msg.pay_price)"
              class="my-button"
              style="float:left!important"
              @click="to_pay()"
            >
              &emsp;
              <span>继续支付</span>
            </div>
          </div>
        </div>
        <div v-if="msg.own_money>0">&emsp;现 金：{{msg.own_money}}</div>
        <div v-if="msg.stage_money>0">&emsp;分 期：{{msg.stage_money}}</div>
        <div v-if="msg.gold_coin>0">&emsp;金 币：{{msg.gold_coin}}</div>
        <div v-if="msg.platform_money>0">&emsp;平台已支付现金：{{msg.platform_money}}</div>
      </li>
      <!-- <div style="clear:both"></div> -->
      <!-- V1.8.7之前杂费显示 -->
      <!-- <li v-if="extra_moneys>0">
                杂费付款方式：
                <span v-if="extra_money_zf>0">&emsp;现 金：{{extra_money_zf}}</span>
                <span v-if="extra_money_fq>0">&emsp;分 期：{{extra_money_fq}}</span>
                <span v-if="extra_money_xs>0">&emsp;线上支付：{{extra_money_xs}}</span>
      </li>-->
      <!-- V1.8.7接口改后的杂费显示 -->
      <li
        v-if="(Number(msg.extra_money_own)+Number(msg.extra_money_stage)+Number(msg.extra_money_online))>0"
      >
        杂费付款方式：
        <span v-if="Number(msg.extra_money_own)>0">&emsp;现 金：{{msg.extra_money_own}}</span>
        <span v-if="Number(msg.extra_money_stage)>0">&emsp;分 期：{{msg.extra_money_stage}}</span>
        <span v-if="Number(msg.extra_money_online)>0">&emsp;线上支付：{{msg.extra_money_online}}</span>
        <!-- <span>&emsp;现 金：{{msg.extra_money_own}}</span>
                <span>&emsp;分 期：{{msg.extra_money_stage}}</span>
        <span>&emsp;线上支付：{{msg.extra_money_online}}</span>-->
      </li>
      <!-- <li>
                <div>
                    <span v-if="msg.form_type==0">奖励总金额：{{msg.pay_money | moneyFormat}}</span>
                </div>
      </li>-->
      <li>
        <div v-if="msg.form_type==0">
          <span v-if="msg.form_type==0">奖励总金额：{{msg.pay_money | moneyFormat}}</span>
        </div>
        <div v-if="msg.form_type==1">
          <span v-if="msg.form_type==1">奖励金额（无补贴）：{{msg.pay_money | moneyFormat}}</span>
        </div>
      </li>
      <li v-if="msg.payment_id != 3">支 付 时 间：{{msg.order_time}}</li>
      <li>客 户 类 型：{{msg.source==1?'渠道':'直客'}}</li>

      <!-- V1.8.7 -->
      <!-- <li v-if="msg.payment_id == 3" @click="show_pay()">
                已支付金额：{{msg.pay_price | moneyFormat}}
                <Icon type="ios-arrow-right"></Icon>
            </li>
            <li v-if="msg.payment_id == 3">
                支 付 状 态：{{msg.pay_status_msg}}
                <div class="my-button" @click="to_pay()" v-if="msg.pay_status != 3">
                    <span>继续支付</span>
                </div>
                <div
                    class="my-button"
                    @click="to_up()"
                    v-if="msg.pay_status == 3 && msg.is_up != 2"
                >
                    <span>升单</span>
                </div>
      </li>-->

      <div class="shadow-line"></div>

      <li v-if="msg.source==1">上级姓名 ：{{msg.service_name}}</li>
      <li v-if="msg.source==1">上级手机 ：{{msg.service_phone}}</li>

      <!-- <li>
        <p>扣除成本的金额：{{msg.all_price}}</p>
        <p class="tip">
          注：扣除成本的金额=总金额-成本
        </p>
      </li>-->
      <!-- <li>积 分 支 付：{{msg.all_credit}}</li>
      <li>实 付 金 额：{{msg.pay_money}}</li>
      <li>客 户 来 源：{{msg.source==1?'渠道':'直客'}}</li>
      <li v-if="msg.source==1">服务商姓名 ：{{msg.service_name}}</li>
      <li v-if="msg.source==1">服务商手机 ：{{msg.service_phone}}</li>-->

      <div class="shadow-line"></div>
      <li @click="apply_add()">
        完 成 项 目：{{msg.project_num}}
        <Icon type="ios-arrow-right"></Icon>
      </li>
      <!-- <li v-if="msg.type != 1" @click="apply_add()">
                完 成 项 目：{{msg.project_num}}
                <Icon type="ios-arrow-right"></Icon>
            </li>
      <li v-else>完 成 项 目：{{msg.project_num}}</li>-->

      <!--
      <router-link  :to="'/programDetail:'+this.msg.order_sn">
        <li>完 成 项 目：{{msg.project_num}}
          <Icon type="ios-arrow-right"></Icon>
        </li>
      </router-link>
      -->
    </ul>

    <div style="padding-left:15px;">
      <span>备&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;注：</span>
      <div class="noteBox">{{msg.user_remark}}</div>

      <div class="img clearfix" v-show="img.length != 0">
        <p>图片</p>
        <ul class="photo" style="padding-bottom:40px">
          <li v-for="item in img" :key="item.id">
            <img :src="baseUrl+item" @click="handleView(item)" />
          </li>
        </ul>
      </div>
    </div>

    <!-- <div class="gray"
    v-show="img.length != 0"></div>-->
    <ul class="right-line">
      <li>经 办 人：{{msg.butler ? msg.butler.name : ""}}</li>
    </ul>

    <Modal title="图片预览" v-model="visible">
      <img :src="imgUrl + imgName" v-if="visible" style="width: 100%" />
    </Modal>

    <div class="my-shadow" v-show="this.is_show_pay"></div>

    <!-- 底部弹窗 -->
    <div class="my-dialog" v-show="this.is_show_pay">
      <div class="close">
        <Icon type="close" @click="close_pay()" style="line-height:40px;padding-left: 15px;"></Icon>
      </div>
      <div>
        <div class="box my-top">
          <div class="box-1">支付方式</div>
          <div class="box-2">支付金额</div>
          <div class="box-3">支付时间</div>
        </div>
        <div class="box" v-for="pay_item in this.pay_list" :key="pay_item.id">
          <div class="box-1">{{payTypeMsg[pay_item.payType-1]}}</div>
          <div class="box-2">{{pay_item.amount}}</div>
          <div class="box-3">{{pay_item.payTime}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast, Popup } from "mint-ui";
import moment from "moment";
import api from "../../assets/js/api";
export default {
  name: "billdetail",
  data() {
    return {
      msg: {
        order: {
          beauty_project_orders_id: "",
          project_name: "",
          project_price: "",
          type: ""
        }
      },
      Isdone: "",
      order_sn: "",
      introduction: "", //备注
      subMsg: false, // 提示语句是否显示
      subMsgContent: "",
      img: [], //关联的图片
      baseUrl: "http://mmkappnew.oss-cn-beijing.aliyuncs.com/",
      imgName: "",
      visible: false,

      //是否展示底部彈窗
      is_show_pay: false,
      pay_list: [],

      payTypeMsg: [
        "信用卡快捷支付",
        "借记卡快捷支付",
        "微信支付",
        "支付宝支付",
        "退款"
      ],
      // 杂费方式
      extra_type: 0,
      // 杂费方式-自费
      extra_money_zf: 0,
      // 杂费方式-分期
      extra_money_fq: 0,
      // 杂费方式-线上
      extra_money_xs: 0,
      // 杂费总和
      extra_money_num: 0,
      extra_moneys: 0
    };
  },
  mounted() {
    this.axios.defaults.baseURL = api;
    this.getBilldetail();
    // 获取头部提示语信息
    this.getHeadMsg();

    //获取支付信息列表
    this.getPayOrderList();

    window.sessionStorage.removeItem("pindex"); //移除项目列表位置栏
  },
  filters: {
    //金额数据 做一个格式化处理
    moneyFormat: function(values) {
      let newValues = values;
      if (parseInt(values) == parseFloat(values)) {
        newValues = parseInt(newValues);
      }
      return newValues;
    },
    // 报单类型
    formTypeFn(e) {
      switch (e) {
        case 0:
          return "美美咖报单";
          break;
        case 1:
          return "传统报单";
          break;
        default:
          return "";
          break;
      }
    },
    // 双20代码
    sales_typeFn(e) {
      switch (e) {
        case 0:
          return "未参加";
          break;
        case 2020:
          return "2020定金全额补";
          break;
        case 1:
          return "2020服务商招商活动全额补";
          break;
        case 2:
          return "超级卖手90%补贴";
          break;
        case 3:
          return "2020定金抵扣活动";
          break;
        case 4:
          return "2000定金九折补贴";
          break;
      }
    }
  },
  methods: {
    //实名认证
    cardFn() {
      this.$router.push("/authentication:" + this.msg.order_sn);
    },
    // 获取杂费金额
    getExtra() {
      let zfArr = []; //自费
      let fqArr = []; //分期
      let xsArr = []; //线上
      this.msg.pay_list.forEach(e => {
        if (e.extra_type == 1) {
          zfArr.push(e.extra_money);
        }
        if (e.extra_type == 2) {
          fqArr.push(e.extra_money);
        }
        if (e.extra_type == 3) {
          xsArr.push(e.extra_money);
        }
      });
      for (var i of zfArr) {
        this.extra_money_zf += Number(i);
      }
      for (var i of fqArr) {
        this.extra_money_fq += Number(i);
      }
      for (var i of xsArr) {
        this.extra_money_xs += Number(i);
      }
      this.extra_money_num =
        this.extra_money_zf + this.extra_money_fq + this.extra_money_xs;
      this.extra_moneys =
        this.extra_money_zf + this.extra_money_fq + this.extra_money_xs;
      // console.log("zfArr",this.extra_money_zf)
      // console.log('fqArr',this.extra_money_fq)
      // console.log('xsArr',this.extra_money_xs)
    },
    getBilldetail() {
      this.order_sn = location.hash.split(":")[1];
      if (!this.order_sn) {
        return false;
      }
      let load = this.loading("加载中");
      load.show();
      this.axios
        .post("/api/butler/water_detail", {
          order_sn: this.order_sn
        })
        .then(res => {
          load.hide();
          if (res.data.code == 200) {
            this.msg = res.data.data;
            this.getExtra();
            console.log(this.msg.order);
            this.msg.order_time = new Date(this.msg.order_time * 1000).Format(
              "yyyy-MM-dd hh:mm"
            );
            if (this.msg.img) {
              this.img = this.msg.img.split("#");
              console.log(this.img);
            }

            // localStorage.setItem("user_tel", res.data.data.user_phone);
            sessionStorage.setItem("user_tel", res.data.data.user_phone);
            sessionStorage.setItem("hospital_id", res.data.data.hospital_id);
          } else if (res.data.code == 250) {
            Toast({
              message: "登录过期，请重新登陆",
              position: "bottom",
              duration: 2000
            });
            this.$router.push("/login");
            return false;
          } else {
            Toast({
              message: res.data.msg,
              position: "bottom",
              duration: 2000
            });
            return false;
          }
        })
        .catch(error => {
          load.hide();
          Toast({
            message: "请求失败，请稍后重试",
            position: "bottom",
            duration: 2000
          });
        });
    },
    getHeadMsg() {
      this.axios
        .post("/api/butler/water_next_level", {
          order_sn: this.order_sn
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.subMsgContent = res.data.data.content;
            this.subMsg = true;
          } else {
            this.subMsg = false;
          }
        })
        .catch(res => {
          this.subMsg = false;
        });
    },

    //获取支付订单列表
    getPayOrderList() {
      this.axios
        .post("/api/butler/get_pay_order_list", {
          order_sn: this.order_sn
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.pay_list = res.data.data.list;
          } else {
            this.pay_list = [];
            Toast({
              message: res.data.msg,
              position: "bottom",
              duration: 2000
            });
            return false;
          }
        })
        .catch(res => {
          this.pay_list = [];
        });
    },

    handleView(name) {
      this.imgName = name;
      this.visible = true;
    },

    apply_add() {
      //msg.user_identify
      // 若用户未实名认证，点击完成项目处的>,提示“该用户未完成实名认证，不可报单”
      if (!this.msg.user_identify) {
        Toast({
          message: "该用户未完成实名认证，不可报单",
          position: "bottom",
          duration: 2000
        });
        return false;
      }
      //对于线上支付的订单需要判断状态 是否满足创建流水单的资质
      if (this.msg.payment_id == 3 && this.msg.pay_status != 3) {
        Toast({
          message: "流水单暂未支付完成",
          position: "bottom",
          duration: 2000
        });
        return false;
      }
      this.$router.push({
        path:
          "/programDetail:" +
          this.msg.order_sn +
          ":" +
          this.msg.form_type +
          ":" +
          this.msg.order.type
      });
    },

    //展示支付弹窗信息
    show_pay() {
      this.is_show_pay = true;
    },

    close_pay() {
      this.is_show_pay = false;
    },

    //去支付
    to_pay() {
      console.log(12);
      this.$router.push({ path: "/paydetail:" + this.msg.order_sn });
    },

    //去升单
    to_up() {
      let nums =
        Number(this.msg.extra_money_own) +
        Number(this.msg.extra_money_stage) +
        Number(this.msg.extra_money_online);
      // console.log(nums)
      if (this.msg.is_up != 1) {
        Toast({
          message: "存在正在审核的补贴单，不允许升单",
          position: "bottom",
          duration: 2000
        });
        return false;
      }
      // if(this.msg.settlement_type == 1){
      //     Toast({
      //         message: "预存款模式，不允许升单",
      //         position: "bottom",
      //         duration: 2000
      //     });
      //     return false;

      // }
      this.$router.push({
        path:
          "/upBill:" +
          this.msg.order_sn +
          ":" +
          this.msg.form_type +
          ":" +
          this.msg.user_phone +
          ":" +
          nums +
          ":" +
          this.msg.settlement_type
      });
    }
  }
};
</script>
<style lang="less" scoped>
.my-shadow {
  position: fixed;
  top: 0px;
  left: 0px;
  opacity: 0.4;
  width: 100%;
  height: 100%;
  background-color: #333333;
  z-index: 100;
}

.my-dialog {
  z-index: 101;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: auto;
  min-height: 150px;
  background-color: #fff;
  overflow: scroll;
  max-height: 100%;
  .close {
    position: relative;
    height: 40px;
  }
  .box {
    display: flex;
    div {
      line-height: 30px;
      text-align: center;
      // width: 33%;
    }

    .box-1 {
      width: 30%;
    }
    .box-2 {
      width: 25%;
    }
    .box-3 {
      width: 45%;
    }
  }
  .my-top {
    div {
      font-weight: bold;
    }
  }
}

.my-button {
  float: right;
  margin-right: 10px;

  span {
    background-color: #ff94b1;
    color: #fff;
    font-size: 16px;
    line-height: 42px;
    height: 42px;
    margin-top: 3px;
    padding: 2px 5px;
    border-radius: 4px;
  }
}

.shadow-line {
  height: 10px;
  background-color: #cccccc;
  opacity: 0.2;
  clear: both;
}

.layout_billdetail {
  width: 100%;
  height: 100%;
  //padding-left: 15px;
  overflow: auto;
  font-size: 17px;
  color: #666;
  text-align: left;
}
.layout_billdetail .list {
  width: 100%;
  position: relative;
}
.list li {
  padding-left: 15px;
  min-height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242);
  font-size: 17px;
  font-family: "PingFangSC-Medium";
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  position: relative;
  .tip {
    color: #ccc;
    margin-top: -25px;
  }
}

.line {
  position: relative;
  .member {
    position: absolute;
    right: 5px;
    top: 1px;

    span {
      background-color: #7d3a3a;
      color: #fff;
      border-radius: 6px;
      padding: 2px 4px;
    }
  }
}
.ivu-icon {
  height: 100%;
  line-height: 50px;
  font-size: 20px;
  float: right;
  margin-right: 15px;
}
span {
  height: 48px;
  line-height: 48px;
}
.noteBox {
  width: 95%;
  height: 120px;
  font-size: 17px;
  color: #888;
  border: 1px solid rgba(204, 204, 204, 0.3242);
  word-wrap: break-word;
  margin-bottom: 30px;
  padding-left: 8px;
}

//额外图片
.img {
  margin-top: 6px;
  p {
    height: 50px;
    line-height: 50px;
  }
}
.gray {
  width: 100%;
  height: 1px;
  margin-top: 10px;
  background: rgba(204, 204, 204, 0.2018);
}
//最多只三张图能
.photo {
  width: 100%;
  height: 110px;
}
.photo li {
  width: 90px;
  height: 90px;
  /* background-color: #d8d8d8; */
  margin-bottom: 10px;
  float: left;
  margin-right: 6px;
}
.photo li img {
  width: 90px;
  height: 90px;
  display: block;
}

// 底部经办人 放到右侧！
.right-line {
  font-size: 14px;
  text-align: right;
  margin-right: 6%;
  margin-bottom: 10px;
}
</style>


<style lang="less">
.ivu-modal-footer,
.ivu-modal-header {
  display: none !important;
}
.share {
  display: block;
  margin: 20px auto;
  font-size: 17px;
  letter-spacing: 1px;
}

.aicon {
  width: 70px;
  height: 30px;
  background-color: #fca3bb;
  border-radius: 0 0 10px 0;
  color: #fff;
  line-height: 30px;
  text-align: center;
}

.jiange {
  width: 110%;
  height: 10px;
  background-color: #f4f4f4;
  margin-left: -15px;
}

.row {
  min-height: 48px;
  line-height: 48px;
  background-color: #fff;
  text-align: left;
  padding-left: 15px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242) !important;
  position: relative;
}
.allBox {
  position: relative;
}
.billendImg {
  width: 51px;
  height: 51px;
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 10;
}
.orderClass {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.subSqurt {
  width: 41px;
  height: 25px;
  background: rgba(234, 137, 137, 1);
  border-radius: 100px 0px 0px 100px;
  color: #fff;
  padding: 0 0 0 10px;
  font-size: 12px;
  line-height: 25px;
}
.subSqurt.all {
  background-color: #5f9bff;
}
.subSqurt.three {
  background-color: #a2a8fa;
}
.subSqurt.second {
  background-color: #f9a77f;
}
.subSqurt.first {
  background-color: #ff94b1;
}
.subWall {
  height: 34px;
  line-height: 34px;
  background-color: #fff6e0;
  padding: 0 15px;
}
.divs-b {
  width: 48.8%;
  display: inline-block;
}
.fw-b {
  width: 100%;
}
.mt-popup {
  width: 100%;
  height: 100%;
}
</style>

